<template>
  <div class="listRight" ref="BScroll">
    <div class="listRightWarp">
        <div class="newest clearfix">
            <Newest :newestInfo="item" v-for="item in listArr" :key="item.id" />
        </div>
        <!-- 上拉加载效果 -->
        <div class="pullUpWrap" v-if="flag">
            <van-loading size="28px" color="#31c27c" v-show="isLoading">加载中...</van-loading>
            <span v-show="!isLoading">没有数据啦</span>
        </div>
    </div>
    
  </div>
</template>

<script>
import Newest from "@/components/Newest";
import BScroll from "@better-scroll/core"; //滚动插件-下拉刷新/上拉触底
import Pullup from "@better-scroll/pull-up"; //上拉触底 依赖滚动插件
BScroll.use(Pullup)
export default {
    name:'listRight',
    components:{Newest},
    props:{
        id:{
            type:String,
            default:'47'      
        }
    },
    data() {
        return {
            listArr:[],
            page:1,
            cid:47,
            bscroll:null,
            isLoading: true, //控制上拉加载效果
            flag: false, //控制上拉显示文字
        }
    },
    async mounted(){
        await this.getData()
        this.initBScroll()
    },
    watch:{
       async id(newVal){
            this.flag=true
            this.isLoading=true
            this.cid=newVal
            this.listArr=[]
            this.page=1
            await this.getData()
            // 解决切换的时候，页面空白的BUG
            this.bscroll.scrollTo(0,0,500),//参数：x轴的值；Y轴的值，500动画时间
            // 当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常
            this.bscroll.refresh();
           
        }
    },
    methods:{
        async getData(cid=this.cid,page=this.page){
            try {
                const result =await this.$api.getNewest2(cid,page)
                console.log(result);
                if(result.status==200){
                    if(result.data.length<1){
                        // 隐藏上拉加载效果
                        this.isLoading=false
                        return false
                    }

                    // 通过展开运算符的形式，进行新旧数据的拼接(扩展运算符,右边赋值给左边)
                    this.listArr=[...this.listArr,...result.data]
                    // this.listArr = this.listArr.concat(result.data)
                }
            } catch (error) {
                console.log(error);
            }
        },
        // 初始化BScroll
        initBScroll(){
            this.bscroll=new BScroll(this.$refs.BScroll,{
                 pullUpLoad: true,//开启上拉触底(加载)
                 click:true
            })
            // 调用上拉触底处理函数
            this.bscroll.on("pullingUp", this.pullingUpHandler);
        },
        async pullingUpHandler(){
            this.flag=true
            // 说明没有更多数据了
            if(!this.isLoading){
                // finishPullUp()：发生上拉动作之后，关闭上拉行为(关闭之后，才能开启下一次)
                this.bscroll.finishPullUp()
                return
            }

            this.page++
            await this.getData(this.cid,this.page)

            // finishPullUp()：发生上拉动作之后，关闭上拉行为(关闭之后，才能开启下一次)
            // 每次触发 pullingUp 钩子后，应该主动调用 finishPullUp() 告诉 BetterScroll 准备好下一次的 pullingUp 钩子。
            this.bscroll.finishPullUp();
            // 当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常
            this.bscroll.refresh();
        }
    }
}
</script>

<style lang="less">
.listRight{
    flex: 5;//占5份
    // calc()计算 当前页面的高度=头部和底部
    height: calc(100vh - 2rem);
    position: relative;
    overflow: hidden;
    // border: 1px solid red;
}
.pullUpWrap,
    .upDown {
        width: 100%;
        padding: 0 0.3rem;
        text-align: center;
        color: #999;
        font-size: 0.28rem;
        padding-bottom: .2rem;
    }
</style>